<!DOCTYPE html>
<html lang="en">
    {% load static %}
    <head>
    {% block head %}
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- favicon -->
    <link rel="icon" type="image/x-icon" href="{% static 'images/favicon.png' %}">
    <link rel="shortcut icon" type="image/x-icon" href="{% static 'images/favicon.png' %}">
    <!--    CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
    <link href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">

    <div id="preloader">
        <div class="loader"></div> 
        <script>
        document.addEventListener("DOMContentLoaded", function() {
            var preloader = document.getElementById('preloader');
            if (preloader) {
                preloader.style.display = 'none';
            }
        });
        </script>
    </div>
    
    <!-- Bootstrap -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    {% endblock head %}
    </head>
    <body>
    {%block navbar %}
        <nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light">
            <a class="navbar-brand" href="/"><img class="logo-img" src="{% static 'images/logo.png' %}" alt=""></a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse justify-content-between" id="navbarSupportedContent">
                <ul class="navbar-nav mr-auto align-items-center">
                    <li class="nav-item">
                        <a href="/" class="nav-link" >ГЛАВНАЯ</a>
                    </li>
                    {% for brand in brands %}
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        {{ brand.name.upper }}
                        </a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                            {% for category in brand.categories.all %}
                            <a class="dropdown-item" href="/browse/{{ brand }}/{{ category }}">{{ category.name }}</a>
                            {% endfor %}
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="/browse/{{ brand }}/all">ОБЗОР {{ brand.name }}</a>
                        </div>
                    </li>
                    {% endfor %}
                    <li class="nav-item">
                        <a href="/browse" class="nav-link">КАТАЛОГ</a>
                    </li>
                </ul>
                <ul class="navbar-nav ml-auto justify-content-end align-content-start" style="padding-left: 50px;">
                    <form class="d-flex" role="search" action="{% url 'search_results' %}">
                        <li><input name="query" class="form-control me-2" type="search" placeholder="Введите модель" aria-label="Search"></li>
                        <li><button class="btn btn-outline-success" type="submit">Поиск</button></li>
                    </form>
                    <li class="nav-item">
                        <a class="nav-link text-danger" href="/admin"><img src="{% static 'images/admin.png' %}" height="15vh" alt="admin"></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/cart"><img src="{% static 'images/cart.png' %}" height="15vh" alt="cart"></a>
                    </li>
                </ul>
            </div>
        </nav>
    {% endblock %}
        {% block content %}{% endblock %}
    </body>
<script>
    $(document).ready(function () {
        $('.dropdown').hover(function () {
            $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);}, function () {
            $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
        });
    });
</script>
</html>